const id = location.search.split("=")[1];
// console.log(id)
const smallimg =  document.querySelector(".sBox>img");
const bigimg =  document.querySelector(".bBox>img");
const magnifier =  document.querySelector(".magnifier");

ajax({
    url:"http://localhost:3000/api",
    data:{
        type:"productList"
    },
    success:res=>{
        // 2.解析数据
        res = JSON.parse(res).productList;
        console.log(res);
        let i=0;
        res.some((val,idx)=>{
            i = idx;
            return val.proId === id;
        })
        console.log(res[i]);
        // 渲染小图
        smallimg.src = res[i].img;
        // 渲染大图
        bigimg.src = res[i].img;
        // 渲染图片列表
        let str ="";
        res[i].imgs.forEach(val=>{
            str +=`<li>
                        <img src="${val}" alt="">
                    </li>`
        })
        magnifier.innerHTML = str;
        document.querySelector(".now").innerHTML = res[i].proName;
        document.querySelector(".product-titles>h2").innerHTML = res[i].proName;
        document.querySelector(".price>span").innerHTML = res[i].price;


        new Magnifier();
        // 解决异步问题，如果不放在这里面，放大镜不出现，因为异步，执行时选择器，数据还没有生成 所以需要一步一步执行（同步）
    }
})




class Magnifier{
    constructor(){
        this.sBox = document.querySelector(".sBox");
        this.bBox = document.querySelector(".bBox");
        this.bImg = document.querySelector(".bBox>img");
        this.sImg = document.querySelector(".sBox>img");
        this.sSpan = document.querySelector(".sBox>span");
        this.imgs = document.querySelectorAll(".magnifier li img");
        this.addEvent();
    }
    addEvent(){
        const that = this;
        this.sBox.onmouseenter = function(){
            that.show();
        } 
        this.sBox.onmouseleave = function(){
            that.hide();
        } 
        this.sBox.onmousemove = function(eve){
            const e = eve || window.event;
            const pos = {
                x:e.offsetX,
                y:e.offsetY
            };
        that.move(pos);
        }
        for(let i=0;i<this.imgs.length;i++){
            this.imgs[i].onmouseenter = ()=>{
                console.log(i);
                this.bImg.src = this.sImg.src = this.imgs[i].src;
                this.imgs[i].style.border = "none"
            }
        }

    }
    show(){
        this.bBox.style.display = "block";
        this.sSpan.style.display = "block";
        this.init();
    }
    hide(){
        this.bBox.style.display = "none";
        this.sSpan.style.display = "none";
    }
    move(ops){
        
        let l = ops.x - this.sSpan.offsetWidth/2 ;
        let t = ops.y - this.sSpan.offsetHeight/2;
      
        if(l<0) l=0;
        if(t<0) t =0;
        if(l>this.sBox.offsetWidth - this.sSpan.offsetWidth){
            l=this.sBox.offsetWidth - this.sSpan.offsetWidth; 
        }
        if(t>this.sBox.offsetHeight - this.sSpan.offsetHeight){
            t=this.sBox.offsetHeight - this.sSpan.offsetHeight; 
        } 

        this.sSpan.style.left = l+"px";
        this.sSpan.style.top = t+"px";

        const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
        const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
        this.bImg.style.left = -x*(this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
        this.bImg.style.top = -y*(this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
    }
    init(){
        this.sSpan.style.height = (this.bBox.offsetHeight / this.bImg.offsetHeight)*this.sBox.offsetHeight +"px";
        this.sSpan.style.width = (this.bBox.offsetWidth / this.bImg.offsetWidth)*this.sBox.offsetWidth +"px";
    }
}
// new Magnifier();





class Num{
    constructor(){
        this.oipt = document.querySelector(".action-quantity-input");
        this.odecrease = document.querySelector(".btn-decrease");
        this.oincrease = document.querySelector(".btn-increase");
        this.addEvent();
    }
    addEvent(){
        const that = this;
        this.oipt.onblur = function(){
            let reg = /^\d+$/;
            let flag = reg.test(that.value);
            if(flag){
                that.value = oipt.value;
            }else{
                that.value = "";
            }
        }
        this.oincrease.onclick = function(){
            that.oipt.value++;
        }
        this.odecrease.onclick = function(){
            that.oipt.value--;
        }
    }
}
new Num()

// $(".thumb-qiehuan").on("mouseenter","li",function(){
//     var i = $(this).index();
//     $(".sBox-img").eq(i).addClass("show").siblings(".sBox-img").removeClass("show");
// })
// $(".thumb-qiehuan").on("mouseenter","li",function(){
//     var i = $(this).index();
//     $(".bBox-img").eq(i).addClass("show").siblings(".bBox-img").removeClass("show");
// })


const imgs = [{
    s:"./imgs/thumb1.jpg",
    m:"./imgs/details1.jpg",
    l:"./imgs/details1.jpg"
},{
    s:"./imgs/thumb2.jpg",
    m:"./imgs/details2.jpg",
    l:"./imgs/details2.jpg"
},{
    s:"./imgs/thumb3.jpg",
    m:"./imgs/details3.jpg",
    l:"./imgs/details3.jpg"
},{
    s:"./imgs/thumb4.jpg",
    m:"./imgs/details4.jpg",
    l:"./imgs/details4.jpg"
},{
    s:"./imgs/thumb5.jpg",
    m:"./imgs/details5.jpg",
    l:"./imgs/details5.jpg"
},{
    s:"./imgs/thumb6.jpg",
    m:"./imgs/details6.jpg",
    l:"./imgs/details6.jpg"
},{
    s:"./imgs/thumb7.jpg",
    m:"./imgs/details7.jpg",
    l:"./imgs/details7.jpg"
},{
    s:"./imgs/thumb8.jpg",
    m:"./imgs/details8.jpg",
    l:"./imgs/details8.jpg"
},{
    s:"./imgs/thumb9.jpg",
    m:"./imgs/details9.jpg",
    l:"./imgs/details9.jpg"
}];

class Tab{
    constructor(){ 
        this.url = "http://localhost:3000/api";
        this.li = document.querySelectorAll(".thumb-qiehuan li");
        this.sImg = document.querySelector(".sBox img");
        this.bImg = document.querySelector(".bBox img");
        this.thumb = document.querySelector(".thumb-qiehuan")
        this.data = imgs;
        this.index = 0;
        this.addEvent();
        // this.getData();
    } 
 
    addEvent(){
        const that = this;
        for(let i=0;i<this.li.length;i++){
            this.li[i].xuhao = i;
            this.li[i].onmouseenter = function(){
                that.hide();
                that.getIndex(this);
            }
        }
    }
    hide(){
        this.li[this.index].className = "";
    }
    getIndex(now){
        this.index = now.xuhao;
        this.show();
    }
    show(){
        this.li[this.index].className = "active";
        this.sImg.src = this.data[this.index].m;
        this.bImg.src = this.data[this.index].l;
    }
   
}
new Tab();






